Pressidian
花园入口
笔记
项目
关于
实验室
GitHub
花园入口
笔记
项目
关于
实验室
GitHub

KNOWLEDGE PATHS

笔记库
当前位置
笔记库/前端/工程化/构建打包/Webpack

魔法注释Magic Comments

1 分钟阅读 · Note

目录树 578 篇

            • 打包原理
            • 魔法注释Magic Comments
            • HMR
          • 打包优化
          • ESbuild
          • Rollup
          • Vite与Webpack的区别
      • 前端技术栈
    • 笔记目录
    • CLAUDE.md
    • Vue 组件与 Render 函数

关联笔记 6

↗打包原理同一路径↗HMR同一路径↗常见问题共同主题↗打包优化共同主题↗ESbuild共同主题↗public与assets的区别 ⌚️共同主题
  • 魔法注释Magic Comments

魔法注释Magic Comments

  • 为动态导入的模块指定 chunk 名称
  • 控制代码分割后生成的文件名
  • 便于调试和长期缓存
// Webpack 中的写法
components: {
  List: () => import(/* webpackChunkName: "list" */ './List.vue')
}```

在Vite中支持但标准的做方法是在配置文件中定义
```javascript
// vite.config.js
export default {
  build: {
    rollupOptions: {
      output: {
        chunkFileNames: 'js/[name]-[hash].js',
        entryFileNames: 'js/[name]-[hash].js',
        assetFileNames: 'assets/[name]-[hash].[ext]'
      }
    }
  }
}```